<template>
  <div class="money" v-loading="load">
    <div class="title">
      <span>{{ type === '1' ? '收款情况：' : '付款情况：' }}</span>
      <el-button
        v-if="props.ifEnd === '履行中'"
        type="primary"
        icon="Plus"
        @click="openAddSituation({})"
        >新增</el-button
      >
    </div>
    <el-table :data="situationTabList" border stripe style="width: 100%; height: 300px">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column v-if="type === '1'" prop="collectionDate" label="收款日期" width="130px" />
      <el-table-column v-if="type === '1'" label="收款金额(元)" width="120px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.collectionAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '1'" prop="collectionType" label="收款方式" width="120px" />
      <el-table-column v-if="type === '0'" prop="paymentDate" label="付款日期" width="130px" />
      <el-table-column v-if="type === '0'" label="付款金额(元)" width="120px">
        <template #default="scope">
          <span>{{ numberFormat(scope.row.paymentAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === '0'" prop="paymentType" label="付款方式" width="120px" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column fixed="right" label="操作" width="120" v-if="props.ifEnd === '履行中'">
        <template #default="scope">
          <el-button link type="primary" size="large" @click="openAddSituation(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" size="large" @click="del(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <SituationDrawer ref="situationDrawer" @getData="emit('getAllData')" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import SituationDrawer from './components/situationDrawer.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import {
    getCollectionDetailGetDetailByContractId,
    deleteCollectionDetailById,
  } from '@/api/controller/collection-detail-controller/index'
  import {
    getPaymentDetailGetDetailByContractId,
    deletePaymentDetailById,
  } from '@/api/controller/payment-detail-controller/index'

  let props = defineProps({
    ifEnd: {
      type: String,
    },
  })

  const load = ref(true)
  const situationTabList = ref([])
  const type = ref(history.state?.contractType)
  const contractId = ref(history.state?.contractId)
  //获取数据
  onMounted(async () => {
    type.value = history.state.contractType
  })

  const getData = async () => {
    try {
      load.value = true
      let res
      if (type.value === '1') {
        res = await getCollectionDetailGetDetailByContractId({
          contractId: contractId.value,
        })
        situationTabList.value = res.data
      } else {
        res = await getPaymentDetailGetDetailByContractId({
          contractId: contractId.value,
        })
        situationTabList.value = res.data
      }
    } finally {
      load.value = false
    }
  }

  //删除
  const del = (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        let result
        if (type.value === '1') {
          result = await deleteCollectionDetailById({ id: row.id }, { loading: true })
        } else {
          result = await deletePaymentDetailById({ id: row.id }, { loading: true })
        }
        if (result.code === 200) {
          emit('getAllData')
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }

  //打开付款/收款情况
  const situationDrawer = ref()
  const openAddSituation = (row) => {
    situationDrawer.value.show(row, type.value, contractId.value)
  }
  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>
